<template>
  <div id="pdfDom">
    <el-row>
      <el-col :span="12">
        <uploader
          :options="options"
          class="uploader-example"
          @file-success="onFileSuccess"
        >
          <!-- <uploader-unsupport></uploader-unsupport> -->
          <uploader-drop>
            <uploader-btn :attrs="attrs" single>选择excel表上传</uploader-btn>
            <!-- <uploader-btn :attrs="attrsimgs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>  //文件夹上传 -->
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-col>
      <el-col :span="24"> </el-col>
    </el-row>
    <div class="flex-centent">
      <el-button type="info" size="small">确定</el-button>
      <el-button v-if="id" type="warning" size="small" @click="putCat"
        >修改</el-button
      >
    </div>
    <div v-if="headers.length > 0">
      <div>表头数据：</div>
      <div class="tag">
        <el-tag v-for="(item, i) in headers" :key="i">{{ item }}</el-tag>
      </div>
      <div>
        选择模板：
        <el-select v-model="noteValue" placeholder="请选择">
          <el-option
            v-for="item in noteOptions"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      edit: false,
      default: "",
    },
  },
  data() {
    return {
      noteValue: "",
      noteOptions: [],
      headers: [],
      options: {
        target: this.$URL + "uploadxlsx",
        singleFile: true, //是否单文件上传
        testChunks: false,
        chunkSize: 1024 * 1024 * 2, //1MB
        simultaneousUploads: 3, //并发上传数
        // extension: "apk",
        headers: {
          Authorization: `Bearer ${sessionStorage.getItem("token")}`,
        },
      },
      attrs: {
        accept: [".xls", ".xlsx"], //选择文件的格式
      },
    };
  },
  created() {
    this.id && this.getCat();
  },
  methods: {
    onFileSuccess: function (rootFile, file, message) {
      let data = JSON.parse(message);
      console.log("headers", this.headers, data);
      this.headers = data.headers;
      this.getNoteMode()
    },
    getNoteMode(){
      this.$http.get("noteMode").then((e)=>{
          if(e.status===200){
            this.noteOptions = e.data.list
          }
      })
    }
  },
};
</script>

<style lang="scss">
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.tag {
  margin: 10px 0;
  & > * {
    margin-right: 10px;
  }
}
</style>